import React from 'react';
import { connect } from 'react-redux';
// import Input from 'shared/BaseComponents/Input';
// import Button from 'shared/BaseComponents/Button';
// import Icon from 'shared/BaseComponents/Icon';
import Spin from 'shared/BaseComponents/Spin';
import { local } from 'shared/utils/func';
import { signInAction } from './actions';
import './index.less';

class Signin extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      buttonState: true,
      data: {}
    };
  }

  handleChange(key,value){
    this.state.data[key] = value;
    if(!!this.state.data.name && !!this.state.data.password){
        this.setState({
            ...this.state,
            buttonState:false
        })
    }
  }

  signIn(){
    //   console.log(this.props)
    this.setState({ loading: true });
    const { signInAction } = this.props;
    signInAction(this.state.data).then((res)=>{
        const { manager_id,token } = res.data
        this.setState({ loading: false });
        this.props.history.push('/wed/projectManage');
        local.setSession('token',token);
        local.setSession('manager_id',manager_id);
    });
  }

  render() {
    const { loading,buttonState } = this.state;
    return (
          <div>
            <div className="login-logo tc">
                <div><img src={require('../../img/log/logo.png')} className="w80" alt="" /></div>
                <h1>懂懂后台管理系统</h1>
            </div>
            <div className="main-container">
                <Spin tip="登录中"
                spinning={loading}
                delay={0}
                >
                <div className="main-content">
                  <div className="warp">
                      <div className="login-main">
                          <div className="login-way w100_">
                              <ul>
                                  <li className="account-login f24 fcolor pointer">账号登录
                                  </li>
                              </ul>
                          </div>
                          <form noValidate className="login-form pb30" >
                              <div className="username pb20">
                                  <input autoFocus type="text" name="name" className="form-control o0 h50" placeholder="邮箱/用户名"
                                  onChange={(e)=>this.handleChange(e.target.name,e.target.value)} />
                              </div>
                              <div className="password pb10 mt20">
                                  <input type="password" name="password" className="form-control o0 h50" placeholder="密码"
                                  onChange={(e)=>this.handleChange(e.target.name,e.target.value)}/>
                              </div>
                              <div className="login-group mt20">
                                  <button disabled={buttonState} className="button-login form-control o0 wsp" type="button" onClick={()=>this.signIn()}>登 录</button>
                              </div>
                          </form>
                      </div>
                    </div>
                </div>
                </Spin>
            </div>
         </div>
    );
  }
}

export default connect((state)=>{
    // console.log('signinstate',state)
     return state
    }, {signInAction})(Signin);